<template>
  <div class="newSongMv">
    <!-- 这里是新歌首发 -->
    <div class="newSong_wrapper">
      <div class="newSong_title">
        <div class="songs_title_wrapper">
          <h3>新歌首发</h3>
          <ul class="language">
            <li
              v-for="(country, index) in countryList"
              :class="{ active: defaultIndex === index }"
              :key="country.id"
              @mouseenter="switchCountry(country.area, index)"
            >
              {{ country.name }}
              <img
                src="./images/blue.png"
                alt=""
                v-if="defaultIndex === index"
              />
            </li>
          </ul>
        </div>
        <div class="songs_pages">
          <Pager />
          <!-- <span class="songs_pages_text">1/3</span> -->
        </div>
      </div>
      <!-- main 是一整个 -->
      <div class="newSongs_main">
        <!-- item_wrapper 是一页 -->
        <ul class="newSongs_items_wrapper">
          <!-- items是一条 -->
          <li
            class="newSongs_items"
            v-for="item in ChineseNewList"
            :key="item.id"
          >
            <div class="image_title">
              <div class="image-wrapper">
                <img :src="item.url" alt="" />
              </div>
              <div class="title_author">
                <div class="title">{{ item.name }}</div>
                <div class="author">{{ item.author }}</div>
              </div>
            </div>
            <div class="play_dl">
              <img src="./images/bf1.png" alt="" />
              <img src="./images/xz.png" alt="" />
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="mv_wrapper">
      <div class="mv-title">
        <h3 class="recom">推荐MV</h3>
        <div class="more">
          <router-link to="/musicVideo">更多 ></router-link>
        </div>
      </div>
      <div class="mv-main">
        <div class="img-wrapper">
          <img src="./images/mv1.jpg" alt="" />
          <div class="mask">
            <div class="stop_btn"></div>
          </div>
        </div>
        <div class="text">
          <p class="one">Lift Me Up</p>
          <p class="two">Rihanna</p>
        </div>
      </div>
      <div class="mv-bottom">
        <div class="mv-bottom-item">
          <div class="img-wrapper">
            <img src="./images/mv2.jpg" alt="" />
            <div class="mask">
              <div class="stop_btn"></div>
            </div>
          </div>
          <p class="one">有理想更青春</p>
          <p class="two">龚俊</p>
        </div>
        <div class="mv-bottom-item">
          <div class="img-wrapper">
            <img src="./images/mv3.jpg" alt="" />
            <div class="mask">
              <div class="stop_btn"></div>
            </div>
          </div>
          <p class="one">I’m a Mess</p>
          <p class="two">Avril Lavigne、YUNGBLUD</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { reqNewSongsList } from "@/api";
import Pager from "@/components/Pager";
import { mapState } from "vuex";
const countryList = [
  {
    id: 1,
    name: "华语",
    area: "Z_H",
  },
  {
    id: 2,
    name: "欧美",
    area: "E_A",
  },
  {
    id: 3,
    name: "韩国",
    area: "KR",
  },
  {
    id: 4,
    name: "日本",
    area: "JP",
  },
];

export default {
  name: "NewSongMv",
  data() {
    return {
      country: "Z_H",
      ChineseNewList: [],
      countryList: countryList,
      defaultIndex: 0,
    };
  },
  mounted() {
    this.getSongList();
  },
  methods: {
    async getSongList(newValue) {
      let result = await reqNewSongsList(this.country);
      const newArr = result.albumProducts.map((item) => {
        return {
          id: item.albumId,
          name: item.albumName,
          author: item.artistName,
          url: item.coverUrl,
        };
      });
      if (newValue === 1) {
        this.ChineseNewList = newArr.slice(0, 10);
      } else if (newValue === 2) {
        this.ChineseNewList = newArr.slice(10, 20);
      } else if (newValue === 3) {
        this.ChineseNewList = newArr.slice(20, 30);
      }
    },
    switchCountry(area, index) {
      this.country = area;
      this.getSongList(1);
      this.defaultIndex = index;
    },
  },
  watch: {
    pages: {
      immediate: true,
      handler(newValue) {
        this.getSongList(newValue);
      },
    },
  },
  computed: {
    // 获取相应的页码
    ...mapState("page", ["total", "pages", "pageSize"]),
  },
  components: {
    Pager,
  },
};
</script>

<style lang="less" scoped>
.newSongMv {
  display: flex;
  justify-content: space-between;
  width: 1000px;
  height: 504px;
  margin: 0 auto;
}

.newSong_wrapper {
  width: 660px;
  height: 504px;
}

.newSong_title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  margin-top: 60px;
  height: 50px;
}

.songs_title_wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 466px;
  height: 50px;
}

.songs_title_wrapper h3 {
  font-size: 26px;
  font-weight: 500;
  color: #000000;
  cursor: default;
}

.songs_title_wrapper .language {
  display: flex;
  justify-content: center;
  margin-left: 50px;
  margin-top: 4px;
}

.language li {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  margin-right: 14px;
  padding: 4px 0;
  font-size: 14px;
  font-weight: 400;
  color: #000000;
  text-align: center;
  cursor: pointer;
}

.language li.active {
  background-color: #e5f6ff;
  color: #00a9ff;
  border-radius: 15px;
}

.language li img {
  width: 14px;
  height: 14px;
}

.language li:last-child {
  padding-right: 0;
}

.songs_pages {
  margin-right: 16px;
  cursor: pointer;
}

.prev,
.next {
  font-weight: 900;
  color: #cacaca;
  font-size: 14px;
}

.songs_pages_text {
  margin-left: 5px;
  margin-right: 5px;
  font-size: 14px;
  color: #000;
}

.newSongs_main {
  width: 660px;
  height: 374px;
}

.newSongs_items_wrapper {
  width: 660px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  box-sizing: border-box;
}

.newSongs_items_wrapper li {
  width: 330px;
  height: 62px;
  box-sizing: border-box;
  margin-bottom: 16px;
}

.newSongs_items {
  display: flex;
  justify-content: space-between;
  cursor: pointer;
}

.newSongs_items .image_title {
  display: flex;
  align-items: center;
}

.newSongs_items .image-wrapper {
  position: relative;
  width: 62px;
  height: 62px;
  overflow: hidden;
}

.newSongs_items .image-wrapper img {
  width: 100%;
  height: 100%;
  cursor: pointer;
  transition: all 0.3s;
}

.newSongs_items:hover .image-wrapper img {
  width: 100%;
  height: 100%;
  transform: scale(1.05);
}

.image-wrapper .mask {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
}

.image-wrapper:hover .mask {
  display: block;
}

.newSongs_items:hover .title,
.newSongs_items:hover .author {
  color: #00a9ff;
}

.newSongs_items:hover {
  background-color: #fafdff;
}

.title_author {
  margin-left: 12px;
}

.title_author .title {
  font-size: 14px;
  font-weight: 400;
  color: #000000;
  word-break: break-all;
  overflow: hidden;
  text-overflow: ellipsis;
}

.author {
  margin-top: 5px;
}

.play_dl {
  width: 56px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-right: 16px;
}

.play_dl img {
  width: 24px;
  height: 24px;
}

.mv_wrapper {
  width: 320px;
  height: 504px;
}

.mv-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 320px;
  height: 50px;
  margin-top: 60px;
  margin-bottom: 20px;
}

.mv-title h3 {
  font-size: 26px;
  font-weight: 500;
  color: #000000;
  cursor: default;
}

.mv-title .more {
  color: #858585;
  font-size: 14px;
  font-weight: normal;
  cursor: pointer;
}
.mv-title .more:hover {
  color: #0badff;
}

.mv-main {
  width: 320px;
  height: 226px;
  border-radius: 10px;
  cursor: pointer;
}

.mv-main .img-wrapper {
  position: relative;
  width: 320px;
  height: 180px;
  border-radius: 10px;
  overflow: hidden;
}

.mv-main .img-wrapper img {
  width: 100%;
  height: 100%;
  cursor: pointer;
  transition: all 0.3s;
}

.mv-main .img-wrapper:hover img {
  transform: scale(1.05);
}

.mv-main .img-wrapper .mask {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
}

.mv-main .img-wrapper:hover .mask {
  display: block;
}

.img-wrapper .mask .stop_btn {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 50px;
  height: 50px;
  transform: translate(-50%, -50%);
  background: url(./images/jx7.png) no-repeat;
  background-size: 100%;
  opacity: 0.9;
}

.mv-main .text {
  width: 320px;
  height: 40px;
  margin-top: 6px;
}

.mv-main .text p:first-child {
  font-size: 14px;
  font-weight: 400;
  color: #000000;
}

.mv-main .text p:last-child {
  margin-top: 2px;
  color: #7e7e7e;
}

.mv-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 14px;
  width: 320px;
  height: 130px;
}

.mv-bottom .img-wrapper {
  position: relative;
  width: 150px;
  height: 84px;
  overflow: hidden;
  cursor: pointer;
}

.mv-bottom .img-wrapper img {
  width: 100%;
  height: 100%;
  cursor: pointer;
  transition: all 0.3s;
}

.mv-bottom .img-wrapper:hover img {
  transform: scale(1.05);
}

.mv-bottom .img-wrapper .mask {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
}

.mv-bottom .img-wrapper:hover .mask {
  display: block;
}

.mv-bottom-item .one {
  font-size: 14px;
  font-weight: 400;
  color: #000000;
  cursor: pointer;
}

.mv-bottom-item .two {
  width: 160px;
  margin-top: 2px;
  color: #7e7e7e;
  word-break: break-all;
  word-break: break-all;
  overflow: hidden;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  cursor: pointer;
}
</style>
